<template>
  <van-tabs v-model:active="active" animated swipeable @click-tab="onClickTab">
    <van-tab title="所有订单"
      ><div class="orderlist" v-for="item in orderDataList" :key="item.id">
        <p
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <span>订单编号 {{ item.ordertime }}</span
          ><span>{{ Number(item.state) == 1 ? '代发货' : '已取消'}}</span>
        </p>

        <div style="display: flex">
          <img
            :src="item.imgurl"
            style="width: 100px; height: 100px; margin-right: 10px"
          />
          <div>
            <div style="display: flex">
              <div
                style="
                  font-weight: bold;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  width: 190px;
                  white-space: nowrap;
                "
              >
                {{ item.title }}
              </div>
              <div style="padding-top: 3px; color: red; font-weight: 400">
                ￥{{ item.price * item.acount }}
              </div>
            </div>

            <p
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <span style="font-size: 10px; color: darkgray"
                >种类:{{ item.text }}</span
              >
              <span style="font-size: 14px; color: darkgray"
                >x{{ item.acount }}</span
              >
            </p>
            <p style="font-size: 16px; float: right; margin-top: 30px">
              收货人:{{ username }}
            </p>
          </div>
        </div>
        <van-divider :style="{ borderColor: '#1989fa' }" /></div
    ></van-tab>
    <van-tab title="待发货">
      <div class="orderlist" v-for="item in orderDataList" :key="item.id">
        <p
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <span>订单编号 {{ item.ordertime }}</span
          ><span>待发货</span>
        </p>

        <div style="display: flex">
          <img
            :src="item.imgurl"
            style="width: 100px; height: 100px; margin-right: 10px"
          />
          <div>
            <div style="display: flex">
              <div
                style="
                  font-weight: bold;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  width: 190px;
                  white-space: nowrap;
                "
              >
                {{ item.title }}
              </div>
              <div style="padding-top: 3px; color: red; font-weight: 400">
                ￥{{ item.price * item.acount }}
              </div>
            </div>

            <p
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <span style="font-size: 10px; color: darkgray"
                >种类:{{ item.text }}</span
              >
              <span style="font-size: 14px; color: darkgray"
                >x{{ item.acount }}</span
              >
            </p>
            <p style="font-size: 16px; float: right; margin-top: 30px">
              收货人:{{ username }}
            </p>
          </div>
        </div>
        <van-divider :style="{ borderColor: '#1989fa' }" />
      </div>
    </van-tab>
    <van-tab title="已完成">已完成</van-tab>
    <van-tab title="已取消">
      <div class="orderlist" v-for="item in orderDataList" :key="item.id">
        <p
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <span>订单编号 {{ item.ordertime }}</span
          ><span>已取消</span>
        </p>

        <div style="display: flex">
          <img
            :src="item.imgurl"
            style="width: 100px; height: 100px; margin-right: 10px"
          />
          <div>
            <div style="display: flex">
              <div
                style="
                  font-weight: bold;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  width: 190px;
                  white-space: nowrap;
                "
              >
                {{ item.title }}
              </div>
              <div style="padding-top: 3px; color: red; font-weight: 400">
                ￥{{ item.price * item.acount }}
              </div>
            </div>

            <p
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <span style="font-size: 10px; color: darkgray"
                >种类:{{ item.text }}</span
              >
              <span style="font-size: 14px; color: darkgray"
                >x{{ item.acount }}</span
              >
            </p>
            <p style="font-size: 16px; float: right; margin-top: 30px">
              收货人:{{ username }}
            </p>
          </div>
        </div>
        <van-divider :style="{ borderColor: '#1989fa' }" />
      </div>
    </van-tab>
  </van-tabs>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      active: 2,
      orderDataList: [],
      username: '',
      phonenumber:''
    };
  },
  async created() {
    this.active = Number(this.$route.query.active);
    const result = await request.get("/good/orderstate?state=" + this.active);
    this.orderDataList = result.data.orderList;
    this.username = localStorage.getItem('username')
  },
  methods: {
    async onClickTab() {
      const result = await request.get("/good/orderstate?state=" + this.active);
      this.orderDataList = result.data.orderList;
    },
  },
};
</script>

<style lang="scss">
.van-tabs__line {
  background-color: red;
}
.orderlist {
  padding: 10px;
  background-color: #fff;
}
</style>
